SL-346: add accessibility improvements for EAA compliance#320
SL-346: add accessibility improvements for EAA compliance#320GytisZum wants to merge 27 commits into
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the application's accessibility to meet EAA compliance standards. The changes focus on making the user interface more navigable and understandable for users relying on assistive technologies, by providing clearer semantic structures and interactive feedback across key components like forms, modals, and payment processes. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive set of accessibility improvements across various templates and JavaScript files. Key changes include enhancing form element labeling, providing descriptive aria-label and alt attributes, improving modal dialog semantics with ARIA roles, and ensuring interactive elements like buttons are semantically correct. These changes significantly improve the user experience for individuals using assistive technologies, aligning the application with better accessibility standards.
| function closeModal($modal) { | ||
| $modal.removeClass('open'); | ||
| var triggerButton = $modal.data('triggerButton'); | ||
| if (triggerButton) { | ||
| triggerButton.focus(); | ||
| } | ||
| } |
| $(document).on('keydown', function (event) { | ||
| if (event.key === 'Escape') { | ||
| var $openModal = $('.modal.open'); | ||
| if ($openModal.length) { | ||
| closeModal($openModal); | ||
| event.preventDefault(); | ||
| } | ||
| } |
| // NOTE: opening modal | ||
| $('#' + $(this).data('target')).addClass('open'); | ||
| $modal.addClass('open'); | ||
| $modal.find('.js-log-modal-close').focus(); |
| type="button" | ||
| onClick={() => setShowApiPassword(!showApiPassword)} | ||
| className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors" | ||
| className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors sp-p-1 sp-min-w-[24px] sp-min-h-[24px] sp-flex sp-items-center sp-justify-center" |
There was a problem hiding this comment.
|
|
||
| <div className="sp-flex sp-justify-end"> | ||
| <Button className="sp-min-w-[120px]" onClick={saveCredentials} disabled={saving}> | ||
| <Button className="sp-min-w-[120px]" onClick={saveCredentials} disabled={saving} aria-label={saving ? t('saving') : undefined}> |
| <button type="submit" class="btn btn-default button button-medium"> | ||
| <span>{l s='Pay' mod='saferpayofficial'}<i class="icon-chevron-right right"></i></span> | ||
| </a> | ||
| </button> |
| <label> | ||
| <input type="radio" name="saved_card_{$paymentMethod|escape:'htmlall':'UTF-8'}" value="{$savedCard['id_saferpay_card_alias']|escape:'htmlall':'UTF-8'}" | ||
| {if $selected }checked="checked" {$selected = 0}{/if} | ||
| > | ||
| <span>{$savedCard['card_number']|escape:'htmlall':'UTF-8'}</span> | ||
| </label> |
| <label> | ||
| <input type="radio" name="saved_card_{$paymentMethod|escape:'htmlall':'UTF-8'}" value="0" | ||
| {if $selected }checked="checked"{/if} | ||
| > | ||
| <span>{l s='Use new card and save it' mod='saferpayofficial'}</span> | ||
| </label> |
| <label> | ||
| <input type="radio" name="saved_card_{$paymentMethod|escape:'htmlall':'UTF-8'}" value="-1"> | ||
| <span>{l s='Use new card once' mod='saferpayofficial'}</span> | ||
| </label> | ||
| </div> |
|
|
||
| <div> | ||
| <iframe id="test-frame" src=''></iframe> | ||
| <iframe id="saferpay-payment-frame" src='' title="{l s='Saferpay payment form' mod='saferpayofficial'}"></iframe> |
|
Warning Gemini encountered an error creating the review. You can try again by commenting |
Adds discernible accessible names to interactive controls that were unlabelled at narrow viewports, resolving 33 of the 36 axe-core violations found during SL-346 QA. - Payment Methods mobile cards: add aria-label to "Logos" and "Custom form" switches (28 violations). Desktop layout was already labelled; only the md:sp-hidden mobile block was missing labels. - Settings tab triggers: add aria-label to all five TabsTrigger buttons (5 violations). Visible text labels are wrapped in sp-hidden sm:sp-inline so on mobile only the icon shows; without aria-label the buttons had no accessible name.
- Darken --sp-muted-foreground from 46% to 38% lightness (4.31:1 -> ~6.4:1) - Replace sp-text-emerald-600 with sp-text-emerald-700 in API Credentials (3.76:1 -> 5.27:1 on white, 3.57:1 -> ~5:1 on emerald-50) Resolves 3 axe-core color-contrast violations across all 5 settings tabs. Verified: 0 contrast issues remain inside #saferpay-settings-root.
Radix Label component does not auto-wire to SelectTrigger; without an explicit aria-label, screen readers announced only the selected value. Resolves last open finding in TC-346.1.
Previously Tab could escape the modal into background page content violating WCAG 2.1.2 (Focus Order) for modal dialogs. Tab/Shift+Tab now cycle within the modal's focusable elements. Resolves TC-346.7.
PrestaShop core .btn-primary teal (#25b9d7) on white was 2.6:1 — fails WCAG 2.1 AA (requires 4.5:1). Scoped override on #saferpay-admin-form only, so other admin pages keep their PS theme. Refund/Capture buttons now use the module brand teal #1c7c80 (5.27:1).
Without scope, screen readers cannot reliably associate header cells with their data column. Resolves TC-346.10 (FO saved credit cards).
The PS Classic theme rendered the Remove link in teal #24b9d7 on white (2.6:1) which fails WCAG 2.1 AA. Use brand teal #1c7c80 (5.27:1) via inline color so the override does not bleed to other theme buttons.
The .btn-primary (BO admin order) and .btn-default (FO saved cards) contrast issues originate in PrestaShop core/theme CSS, not in our module. Overriding them at module level was the wrong layer: - fragile against theme updates - could clash with merchant theme customizations - inconsistent with our decision to scope SL-346 to module-owned UI These now match the same out-of-scope category as the BO breadcrumb, help button, and submenu tabs. Module-owned a11y fixes (React Settings app contrast, aria-labels, scope=col, focus trap, etc.) remain in PR.
- Disable Save Changes button when username/password empty, credential check is in flight, or inline credential error is shown - Mark JSON API Username and Password as required (visual asterisk + aria-required) to surface the requirement before user clicks Save
The Saferpay Fields section was driven by a single hasBusinessLicense flag derived from the active environment's stored license at page load. Switching environments client-side did not re-evaluate it, so the section stayed visible after switching to an environment with no validated business license. Expose testHasBusinessLicense and liveHasBusinessLicense separately from the controller (initial payload and save response), and pick the active one in api-credentials.tsx based on testMode.
…ntials Disable Save Changes when API credentials empty or invalid
…nse-visibility Fix Saferpay Fields visibility per active environment license
The polling script in saferpay_wait.tpl navigated the iframe itself via window.location.href, leaving the parent window stuck on the SaferPay iframe controller URL while the cart or order-confirmation page rendered nested inside the iframe. Use window.top so the redirect targets the parent window and the user lands at /cart or /order-confirmation with the proper top-level chrome.
Address review feedback on PR #325: - Use location.replace() so the polling page is not stored in history (Back from order-confirmation should not return to the spinner). - Wrap window.top access in try/catch with an in-iframe fallback in case sandboxing or browser policy blocks the breakout.
…owns show All instead of 0
…rictions-default BUGFIX: payment methods default to all countries/currencies and dropdowns show All instead of 0
fix: break out of SaferPay iframe on payment status redirect
…rpay transaction abort
…redirect-secure-key
BUGFIX: redirect customer to cart instead of order history after Saferpay transaction abort
…le-info BUGFIX: clarify Hosted field style info banner to mention Custom form requirement
Frontend (api-credentials.tsx): show inline error and disable Save when any comma-separated entry fails an email regex. Backend (AdminSaferPayOfficialSettingsController): reject save when testMerchantEmails or liveMerchantEmails contains a value that fails Validate::isEmail() — guards against curl/devtools bypass.
BUGFIX: validate Merchant Emails field on save
When 'Behavior when 3D Secure Payer Authentication was not successful' was set to Authorize, the order was still being captured because the AUTHORIZE branch was missing and the CANCEL branch did not return early, so control fell through to the default-payment-behavior Capture block. Each 3DS-fail branch now returns/dies explicitly, so the configured 3DS-fail behavior is always honored.
isValidResponse() already logs API errors before throwing SaferPayApiException, so the surrounding catch in get(), getWithCredentials(), and postWithCredentials() produced a redundant error row for every failed call. Guard the catch-block logger->error with if ($response === null) so it only fires on transport-level failures, where isValidResponse() never ran.
Self-Checks
JIRA task link
https://invertus.atlassian.net/browse/SL-346
Summary
Brings the BO Settings React app in line with WCAG 2.1 AA / European Accessibility Act (EAA) requirements by ensuring every interactive control exposes a discernible accessible name to assistive technology.
What changed and why
1. Payment Methods — mobile-card switches (
payment-methods.tsx)The Payment Methods tab renders the methods list in two parallel layouts:
aria-label="Enable {Method}",aria-label="Logos {Method}", etc. ✅md:sp-hidden): only the "Enable" switch had anaria-label. The "Logos" and "Custom form" switches inside each card had noaria-label, no associated<label for>, and no<label>wrapper — only a sibling<span>with the visible text. Sighted users could see "Logos" via proximity, but screen reader users heard only "switch, off" with no method or purpose context.Added
aria-label={${t('logos')} ${method.displayName}}andaria-label={${t('customForm')} ${method.displayName}}to mirror the desktop pattern.Impact: removes 28 of 33 "Buttons must have discernible text" violations.
2. Settings tab triggers (
saferpay-settings.tsx)The five Radix
TabsTriggerbuttons (API Credentials / Payment Methods / Payment Processing / Email Notifications / General Settings) render an icon plus a text label. The text is wrapped in<span className="sp-hidden sm:sp-inline">— so on viewports belowsm(640px) only the icon is visible. Because the button itself had noaria-label, the accessible name was empty at that breakpoint and assistive tech announced "button" with no indication of which tab.Added
aria-label={t('tabApiCredentials')}(and equivalents) to eachTabsTrigger. The visible text remains the source of truth on wider viewports; thearia-labelprovides an equivalent name for AT regardless of viewport.Impact: removes the remaining 5 "Buttons must have discernible text" violations.
How it was tested
Manual verification against the same testing environment used for SL-346 QA (PrestaShop 8.2.3 + ngrok), at iPhone 12 Pro / 14 Pro Max viewport widths to surface the mobile layout.
Tools used:
button[role="switch"]andbutton[role="tab"]elementsBefore fix (axe DevTools, mobile viewport)
After fix (same viewport, hard reload)
sp-text-emerald-600,sp-text-muted-foreground) and out of scope for this PRReproduction snippet (browser console)
Regression sanity
aria-labelonTabsTriggerbecomes the accessible name but does not affect rendered textQA Checklist Labels
Additional Context
This PR continues the EAA compliance work started in commit
a766c1. Two other minor accessibility findings remain for follow-up (separate PRs): the "Hosted field style" combobox in General Settings still lacks a programmatic label, and three text tokens fail WCAG AA color contrast.Frontend Changes
No visual changes — these edits add ARIA attributes only. Verified with axe DevTools before/after at the same viewport.